<template>
    <div>
        <el-row class="mt10">
            <el-col :span="8">
                <el-form ref="formRef" :model="model" status-icon :rules="rules" label-width="120px" class="myform"
                    label-position="top">
                    <slot :model="model"></slot>
                    <el-form-item class="lastitem" v-if="!toggle">
                        <el-button type="success" block class="btnblock"
                            @click="submitForm(formRef)">{{ confirmText }}</el-button>
                        <el-button type="danger" block class="btnblock" @click="resetForm(formRef)">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router';
import { useFormHook } from '../hooks/useFormHook';
import { ShowError } from '../utils/message';


const router = useRouter()
const formRef = ref<any>()
const model = ref<any>({})
const props = defineProps({
    rules: Object,
    confirmText: {
        type: String,
        default: '添加'
    },
    toggle: {
        type: Boolean,
        default: false
    }
})
const emits: any = defineEmits()

const submitForm = (formEl: any) => {
    formRef.value.validate((valid: boolean) => {
        if (valid) {
            emits("addForm", model.value)
        } else {
            ShowError('请输入有效的表单数据信息')
        }
    })
}

const { resetForm } = useFormHook()

defineExpose({
    model,
    submitForm,
    formRef
})
</script>

<style lang="scss" scoped>

</style>